/* eslint-disable operator-linebreak */
/* eslint-disable react/no-danger */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useRef } from 'react';
import { Collapse } from 'antd';
import hljs from 'highlight.js';
import MarkdownIt from 'markdown-it';
import concurrent from '@/assets/images/advanceReact/concurrent.png';

import 'highlight.js/styles/atom-one-light.css';
import './index.less';

const { Panel } = Collapse;
const mdParser = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (error) {
        console.log(error);
      }
    }
    return ''; // 使用额外的默认转义
  },
});

export default function DataFlow() {
  return (
    <div className="advance-react-wrapper">
      <Collapse defaultActiveKey={['1', '2', '3', '4']}>
        <Panel header="1、前言" key="1">
          <p>
            在React中，双缓冲模式的主要利好，则是能够帮我们较大限度地实现Fiber节点的复用，从而减少性能方面的开销。
          </p>
          <p>
            current树与workInProgress树可以对标“双缓冲”模式下的两套缓冲数据:
            当current树呈现在用户眼前时，所有的更新都会由workInProgress树来承接，
            workInProgress树将会在用户看不到的地方(内存里)悄悄地完成所有改变。
          </p>
        </Panel>
        <Panel header="2、优先级和优先级调度" key="2">
          <p>
            Scheduler为幕后推手，异步渲染模式下，workLoopSync将被以workLoopConcurrent代替，这个函数仅仅是在while循环时多了一层
            <code>!shouldYield()</code>判断，该函数返回的布尔值代表是否需要让出主线程。
          </p>
          <p>
            <code>shouldYield()</code>: react根据浏览器帧率算出时间切片大小yieldInterval,
            并结合当前时间currentTime计算得到每个切片的到期时间deadline。
          </p>
          <p>
            <code>unstable_scheduleCallback</code>发起调度，结合任务优先级，执行不同的调度逻辑。
          </p>
          <p>
            <code>starTime:</code>任务开始时间。
            <br />
            <code>expirationTime:</code>该值越小，优先级越高
            <br />
            <code>timerQueue:</code>
            一个以startTime为排序的小顶堆，它存储的是startTime大于当前时间（也就是待执行）的任务
            <br />
            <code>taskQueue:</code>
            一个以expirationTime为排序的小顶堆，它存储的是startTime小于当前时间（也就是已过期）的任务
            <br />
            <p>
              requsetHostTimeout派发延迟任务，requsetHostCallback(flushWork)派发即时任务,flushWork中将调用workLoop，workLoop会逐一执行taskQueue中的任务
              直到调度过程被暂停(时间片用尽)或任务全部被清空。
            </p>
            <p>
              React发起Task调度的姿势有两个:
              setTimeout、MessageChannel，requestHostCallback发起的“即时任务”
              最早也要等到下一次事件循环才能够执行
            </p>
            <img src={concurrent} alt="" width="70%" />
          </p>
        </Panel>
      </Collapse>
    </div>
  );
}
